<template>
  <scroll-view
    class="container comment"
    scroll-y
    :show-scrollbar="false"
    enhanced
    @scrolltolower="pullUpLoad"
  >
    <!-- 评论列表 -->
    <view class="comment_wrapper">
      <view
        class="comment_list"
        v-for="comment in commentsList"
        :key="comment.id"
      >
        <view class="comment_item">
          <view class="logo">
            <image :src="comment.avatar" />
          </view>
          <view class="content_wrap">
            <view class="name">{{ comment.nickname }}</view>
            <veiw class="date">
              {{ comment.gmtModified }}
              <uni-rate :touchable="false" :value="5" size="12" />
            </veiw>
            <view class="content">{{ comment.content }}</view>
          </view>
        </view>
      </view>
    </view>
    <!-- 加载更多 -->
    <view class="load_more">
      <uni-load-more :status="status" />
    </view>

    <!-- 提交评论 -->
    <view class="comment_bar">
      <input
        class="input_box"
        placeholder="请点击输入"
        cursor-spacing="10"
        v-model="comment"
      />
      <uni-icons
        class="input_icon"
        type="paperplane-filled"
        size="20"
        @click="submitComment"
      />
    </view>
  </scroll-view>
</template>

<script lang="ts" setup>
import { reqGetCommentList, reqPostComment } from "@/api/comments";
import type { CommentsItemsType } from "@/api/type";
import { onLoad, onReachBottom } from "@dcloudio/uni-app";
import { ref } from "vue";
// 获取评论列表
// 定义初始化评论列表
const commentsList = ref<CommentsItemsType>([]);
const pages = ref(1);
const totalPages = ref(0);
const comment = ref("");
const courseId = ref("");
const teacherId = ref('')
const getCommentsList = async (id: string) => {
  const res = await reqGetCommentList(1, 10, id);
  // console.log(res);
  pages.value = res.pages;
  totalPages.value = res.total;
  commentsList.value = [...commentsList.value, ...res.items];
  status.value = "more";
};
// 点击发布评论的回调
const submitComment = async () => {
  await reqPostComment(comment.value,courseId.value,teacherId.value);
  uni.showToast({
    title:"评论发表成功",
    icon:"success"
  })
  comment.value='',
  commentsList.value=[]
  pages.value=1,
  getCommentsList(courseId.value);
};
const pullUpLoad = () => {
  if (pages.value === totalPages.value) {
    status.value = "no-more";
    return;
  }
  pages.value++;
  getCommentsList(courseId.value);
};
onLoad((options) => {
  // console.log(options);
  // 获取courseId和teacherId
  courseId.value = options!.courseId;
  const teacherId = options!.teacherId
  getCommentsList(courseId.value);
});

const status = ref("more");
onReachBottom(() => {
  // 继续发送请求
  if (status.value === "more") {
    getCommentsList(courseId.value);
  }
});
</script>
<style lang="scss" scoped>
.comment_wrapper{
  padding-right: 100rpx;
}
.comment {
  background: white;
  padding: 16px 16px 60px 16px;
  .comment_bar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 999;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(
      180deg,
      hsla(0, 0%, 86.7%, 0) 0,
      hsla(0, 0%, 86.7%, 0.2) 0.42857rem,
      hsla(0, 0%, 86.7%, 0.2) 0.57143rem,
      #fff 0.64286rem,
      #fff
    );

    .input_box {
      width: 80%;
      height: 30px;
      line-height: 30px;
      background-color: #f2f3f7;
      border-radius: 20px;
      // text-indent: 10px;
      padding-left: 10px;
      font-size: 16px;
    }
    .input_icon {
      margin-left: 8px;
    }
  }
}
.comment_list {
  .comment_item {
    display: flex;
    padding: 15px 0;
    border-bottom: 0.07143rem solid #ececec;

    .logo {
      border-radius: 50%;
      width: 32px;
      height: 32px;
      margin-right: 8px;

      image {
        border-radius: 50%;
        height: 100%;
        width: 100%;
      }
    }

    .content_wrap {
      font-size: 12px;
      color: #000;
      flex: 1;

      .date {
        color: #a1a5b2;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }

      .content {
        margin-top: 8px;
      }
    }
  }
}
</style>
